<template>
  <div>
    <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="名称" prop="costType">
        <el-input v-model="form.costType" placeholder="请输入成本类型名称" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="form.description" placeholder="请输入成本类型描述" />
      </el-form-item>
    </el-form>

    <el-row class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </el-row>

  </div>
</template>
<script lang="ts" setup>
import { addMatCostType } from "@/requests/api/material";
import { Message } from "element-ui";
import { ref, Ref } from "vue";
const form = ref({
  description: "",
  costType: "",
});
const rules = ref({
  costType: [
    { required: true, message: '请填写成本类型名称', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请填写成本类型描述', trigger: 'blur' },
  ]
})
const emit = defineEmits(['changeJournal', 'refreshTable'])
const dictRef: Ref<any> = ref();
const cancel = () => {
  dictRef.value.resetFields();
  emit('changeJournal', false)
}
const submitForm = () => {
  dictRef.value.validate(async (valid: any) => {
    if (valid) {
      if (form.value.costType != undefined) {
        addMatCostType(form.value).then(() => {
          Message.success("修改成功");
          emit('changeJournal');
        }).catch(() => {
          Message.error("修改失败");
        });

      } else {
        // addType(form.value).then(() => {
        //   Message.success("新增成功");
        //   emit('refreshTable');
        //   emit('changeJournal', false);
        // });
      }
    }
  });
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  float: right;
  margin-bottom: 20px;
}
</style>